<script setup lang="ts">
import * as echarts from 'echarts'
const charts = ref()
let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical', // 图例放置方向
    top: 50,
    right: 10, // 图例放置位置
    textStyle: {
      color: 'white',
      fontSize: 16
    }
  },
  series: [
    {
      name: '年龄分布',
      type: 'pie',
      radius: ['30%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside',
        color: 'white'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 548, name: '儿童' },
        { value: 735, name: '学生' },
        { value: 580, name: '青年人' },
        { value: 884, name: '中年人' },
        { value: 1300, name: '老年人' }
      ]
    }
  ],
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  }
}
onMounted(() => {
  let myecharts = echarts.init(charts.value)
  // 设置echarts配置项
  myecharts.setOption(option)
})
</script>

<template>
  <div class="box1">
    <div class="top">
      <p class="title">年龄分类</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style lang="scss" scoped>
.box1 {
  background: url(../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .top {
    margin: 10px 0 0 20px;
    .title {
      color: white;
      font-size: 20px;
    }
    .bg {
      width: 100px;
      height: 7px;
      background: url(../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .charts {
    width: 100%;
    height: 240px;
  }
}
</style>
